<template>
	<!-- :style="{ filter: 'blur(' + blurAmount + 'px)'}" alt="模糊图片" -->
	<div class="Book_Content">
		
		<div class="ad">
			<div>
				<router-link to="/mobile/booklist">
				<p>返回</p>
			</router-link>
			</div>
			<div>
				<p>商品</p>
			</div>
			<div>
				<p>详情</p>
			</div>
			<div>
				<p><router-link :to="`/mobile/bookeva/${book.id}`">评论</router-link>  </p>
			</div>
			<div>
				<p>推荐</p>
			</div>
		</div>
		<div class="goods">
			<div>
				<img :src="`http://127.0.0.1/api/public/showimg/${pic}`" />
			</div>
			<div class="goodElement">
				<div>简介:{{book.info}}</div>
				<div class="pl"><!-- 评论 -->
				<div>
					<h5>⭐⭐⭐⭐⭐100条评论</h5>
					<h5 style="color: #b8b8ba; font-size: 10px; width: 100px;">10000人评论</h5>
				</div>
					<div class="goPl">
						<button><router-link :to="`/mobile/myeva/${book.id}/${pic}`">我要评论</router-link> </button>
					</div>
				</div>
				<div class="goodjs"> 
				<!-- 商品介绍 -->
				<div style="display: flex;">书名<div style="width: 30px;"></div>{{book.name}}</div>
				<hr />
					<div style="display: flex;">作者<div style="width: 30px;"></div>{{book.author}}</div>
					<hr />
					<div style="display: flex;">出版<div style="width: 30px;"></div>{{book.maker}}</div>
					<hr />
				</div>
				<div style="height: 5px; background-color: #DCDCDC; border: #DCDCDC 1px;"></div>
				<div class="dz"> <!-- 地址 -->
				<div>
					送至
				</div>
					<p>配送至 萨达萨达萨达萨达是</p>
				</div>
				<hr />
				<div class="bz"><!-- 保障 -->
					<p>©支持七天无理由退货 ©--发货&售后  ©正品保障 </p>
					<p>©支持V卡 ©支持礼物卡  ©礼品包装 </p>
				</div>
				<hr style="height: 2px;"/>
				<div>
					{{buyState}} {{book.name}}
				</div>
				<hr />
				<div>
					数量<button style="width: 20px;margin-top: 10px;"@click="num(-1)">-</button>{{Num}}<button style="width: 10px;" @click="num(1)">+</button>
				</div>
				<hr />
				<div>
					<details>
						<summary>简介</summary>
						{{book.info}}
					</details>
				</div>
				<hr />
				<div style="display: flex;">
					<div class="num">
						<div>
							<h6 style="width: 23px;">{{Num}}</h6>
						</div>
					</div>
					<div style="margin-top: 30px; margin-left: 10px;"><button
							style="background-color: #ff2732;border: none;border-radius: 6px;" @click="Cart()" >加入购物车</button></div>
					<div style="margin-top: 30px; margin-left: 6px;"><button
							style="background-color:  #fdeded; border: #ff2732 0.1px solid;">立即购买</button></div>
				</div>
			</div>
		</div>
		<div class="summary">
			<div class="summary2">
			</div>
			<div class="summary_3">
				<p>评价</p>
				<table>
				</table>
			</div>
			<div>
				
			</div>
		</div>
	</div>
	</div>
</template>

<script>
	export default {
		name: 'MobileHomeList',
		data() {
			return {
				buyState:'未选',
				blurAmount: 100,
				pic:{},
				book:{},
				Num:1,
			}
		},
		methods: {
			Cart(){
				this.$get("/api/public/addCart/"+this.book.id).then((resp)=>{
					console.log(resp)
				})
			},
			getTxt(){
				let url=this.$route.fullPath.split('/')[3];
				console.log(this.$route.fullPath);
				this.$axios.get("http://127.0.0.1/api/public/findPageBook/1/12/0")
					.then((resp) => {
						console.log(resp.data.data);
						resp.data.data.books.forEach((item,i) => {
							if(item.id==url){
								console.log(item)
								this.book.id = item.id;
								this.pic = item.pic
								this.book.name=item.name
								this.book.info = item.info
								this.book.author = item.author
								this.book.price = item.price
								this.book.maker =item.maker
							}
						})
					})
					console.log(this.book);
			},
			num(n){
				this.Num +=n
				if(this.Num<0)this.Num=0;
				if(this.Num>10)this.Num=10;
			}
		},
		mounted(){
			this.getTxt();
		}
	}
</script>

<style scoped>
	.dz{
		display: flex;
	}
	.goodjs{
		margin-top: 10px;
	}
	.goPl{
		margin-left: 150px;
	}
	.goPl button{
		margin-top: 10px;
		border: solid #f9beb2 0.5px;
		border-radius: 10px;
		background-color: #fff0ea ;
	}
	.pl{
		display: flex;
		height: 40px;
		background-color: gainsboro;
	}
	.Book_Content {
		width: 100%;
		height: 50rem;
		
	}

	.nav {
		display: flex;
		justify-content: center;
	}
.ad{
	display: flex;
}
	.ad p {
		font-size: 25px;
	}
.ad div{
	margin-left: 20px;
}
	.goods {
		
		margin-top: 15px;
	}

	.goods img {
		width: 100%;
	}

	.goodElement p {
		margin-top: 20px;
		font-size: 15px;
	}

	.goodElement {
		margin-top: 10px;
		margin-left: 30px;
	}

	.num {
		margin-top: 10px;
		width: 40px;
		display: flex;

		height: 65px;
	}

	.collection {
		display: flex;
	}

	.summary2 {
		margin-top: 20px;
	}
	.summary_3 {
		margin-top: 20px;
	}
</style>
